<template>
	<view>
		<view class="add" v-show="isSend" @click="changeState">+</view>
		<view class="content"  :style="style">
			<!-- 标题 -->
			<view class="hd">
				<text class="tips">标题:</text>
				<view class="close" @click="changeState">x</view>
			</view>
			<!-- 标题输入 -->
			<input type="text" class="title" placeholder="这里填写标题" v-model="title">
			<!-- 内容 -->
			<view class="hd">
				<text class="tips">内容:</text>
			</view>
			<!-- 内容输入 -->
			<textarea placeholder="这里填写详细" v-model="content" />
			<button class="send" @click="sendContent">添加</button>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		ref,
		toRefs
	} from "vue"

	export default {
		emits: ["sendContent"],
		setup(props, {
			emit
		}) {
			const isSend = ref(true)

			//定义响应式变量
			const state = reactive({
				title: "",
				content: ""
			});

			const style = ref({
				bottom: "-300px"
			})

			const changeState = () => {
				isSend.value = !isSend.value;
				if (!isSend.value) {
					style.value.bottom = "0px";
				} else {
					style.value.bottom = "-300px";
				}
			}

			const sendContent = () => {
				//要赋值，子传父
				//打包变量,因为如果直接操作对象，那么清空时也会改变传递到父组件的值，所以这里用变量过渡一下。
				const todo = {
					title: state.title,
					content: state.content,
					time: "2022年11月10日",
					view: false
				}
				console.log(todo);

				emit("sendContent", todo);
				// isSend.value = !isSend.value;

				state.title = "";
				state.content = "";
			}

			return {
				isSend,
				changeState,
				sendContent,
				...toRefs(state),
				style

			}
		}
	}
</script>

<style lang="scss" scoped>
	.hd {
		// display: flex;
		// flex-flow: row nowrap;
		padding: 20rpx;
		background-color: #fdf6f4;

		text {
			// flex: 1;		
		}

		.tips {
			display: inline-block;
			left: 20rpx;
		}

		.close {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: #cd5453;
			color: #ffffff;
			display: inline-block;
			right: 20rpx;
			text-align: center;
			line-height: 45rpx;
			float: right;
		}
	}

	.add {
		width: 70rpx;
		height: 70rpx;
		line-height: 60rpx;
		border-radius: 50%;
		background-color: #cd5453;
		color: #ffffff;
		display: inline-block;
		right: 20rpx;
		text-align: center;
		position: fixed;
		float: right;
		font-size: 70rpx;
		top: 660rpx;
	}

	textarea {
		width: 100%;
	}

	.send {
		background-color: #cd5453;
		color: #ffffff;
		border-radius: 5rpx;
	}

	.content {
		display: block;
		position: absolute;
		bottom: -300px;
		width: 100%;
		transition: all .5s;
		-webkit-transition: all .7s;
		/* Safari */
	}
</style>
